<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        select{
            width: 100px;
            height: 200px;
        }
    </style>
</head>
<body>
    <select name="" id="left" multiple="multiple">
        <option value="">李白</option>
        <option value="">赵云</option>
        <option value="">鲁班大师</option>
        <option value="">貂蝉</option>
    </select>
    <input type="button" id="btn1" value="&gt;&gt;"/>
    <input type="button" id="btn2" value="&lt;&lt;"/>
    <input type="button" id="btn3" value="&gt;"/>
    <input type="button" id="btn4" value="&lt;"/>
    <select name="" id="right" multiple="multiple"></select>
</body>
</html>
<script>
    $ = id => document.getElementById(id)
    var btn1 = $("btn1");
    var btn2 = $("btn2");
    var btn3 = $("btn3");
    var btn4 = $("btn4");
    var left = $("left");
    var right = $("right");


    btn1.onclick = function(){
        right.innerHTML += left.innerHTML
        left.innerHTML = ''
    }
    btn2.onclick = function(){
        left.innerHTML += right.innerHTML
        right.innerHTML = ''
    }
    btn3.onclick = function () {
        move(left,right)
    };
    btn4.onclick = function () {
        move(right,left)
    };
    let move = (from,goto) => {
        for( let i = 0; i< from.children.length ; i++){
            if(from.children[i].selected == true){
                goto.appendChild(from.children[i])
                //这里的i--如果不添加的话会导致选择一个以上元素移动时，移动一个后from.children.length改变导致
                //后续无法正常进入循环
                i--
            }
        }
    }
</script>

<!-- 知识点：
innerHTML 本质上就是一个元素内所有的节点构成的字符串，自然也也可以使用字符串拼接的方式来增加内容
要学会利用dir元素寻找checked selected这种特殊的属性为我们所用
appendChild会直接拿走原元素的子节点，如果不想实现此效果，先拷贝再append即可 -->
